<template>
  <div :style="parentStyle" :class="['top_btns_root_css',{'is-logo-right':logoRight,'is-logo-left':logoLeft}]">
<!--    <img-text-btn-view-->
<!--      v-if="!$slots.btnItem"-->
<!--      :icon-left="true"-->
<!--      text="筛选"-->
<!--      :focusable="true"-->
<!--      style="width: 145px;height: 60px;margin-left: 10px;margin-right: 10px"-->
<!--      name="top_search_btn"-->
<!--      ref="top_search_btn"-->
<!--      icon="ic_top_search.png"-->
<!--      focus-icon="ic_top_search_focus.png"-->
<!--      @click="onClick"-->
<!--      @focus="onFocus"/>-->
<!--    <img-text-btn-view-->
<!--      v-if="!$slots.btnItem"-->
<!--      :icon-left="true"-->
<!--      text="搜索"-->
<!--      :focusable="true"-->
<!--      style="width: 145px;height: 60px;margin-left: 10px;margin-right: 10px"-->
<!--      name="top_search_btn1"-->
<!--      ref="top_search_btn1"-->
<!--      icon="ic_top_search.png"-->
<!--      focus-icon="ic_top_search_focus.png"-->
<!--      @click="onClick"-->
<!--      @focus="onFocus"/>-->
    <login-status-view />
    <s-text-view :font-size="36" text="背题" color="white"></s-text-view>
    <span v-if="regNumber.lenght>2" class="home_regNumber" :focusable="false">备案号：{{regNumber}}</span>
<!--    <img-text-btn-view-->
<!--      v-if="!$slots.btnItem"-->
<!--      text="搜索"-->
<!--      :focusable="true"-->
<!--      :icon-top="true"-->
<!--      :imgTxtBtnStyle="{width: '120px',height: '120px','margin-left': '10px','margin-right': '10px'}"-->
<!--      name="top_search_btn1"-->
<!--      ref="top_search_btn"-->
<!--      icon="ic_top_search.png"-->
<!--      focus-icon="ic_top_search_focus.png"-->
<!--      @click="onClick"-->
<!--      @focus="onFocus"/>-->
<!--    <img-text-btn-view-->
<!--      v-if="!$slots.btnItem"-->
<!--      text="搜索"-->
<!--      :focusable="true"-->
<!--      :icon-right="true"-->
<!--      :imgTxtBtnStyle="{width: '145px',height: '60px','margin-left': '10px','margin-right': '10px'}"-->
<!--      name="top_search_btn2"-->
<!--      ref="top_search_btn"-->
<!--      icon="ic_top_search.png"-->
<!--      focus-icon="ic_top_search_focus.png"-->
<!--      @click="onClick"-->
<!--      @focus="onFocus"/>-->
<!--    <img-text-btn-view-->
<!--      v-if="!$slots.btnItem"-->
<!--      text="搜索"-->
<!--      :focusable="true"-->
<!--      :icon-bottom="true"-->
<!--      :imgTxtBtnStyle="{width: '120px',height: '120px','margin-left': '10px','margin-right': '10px'}"-->
<!--      name="top_search_btn3"-->
<!--      ref="top_search_btn"-->
<!--      icon="ic_top_search.png"-->
<!--      focus-icon="ic_top_search_focus.png"-->
<!--      @click="onClick"-->
<!--      @focus="onFocus"/>-->
<!--    <img-text-btn-view-->
<!--      v-if="!$slots.btnItem"-->
<!--      text="搜索"-->
<!--      :focusable="true"-->
<!--      :imgTxtBtnStyle="{width: '145px',height: '60px','margin-left': '10px','margin-right': '10px'}"-->
<!--      name="top_search_btn4"-->
<!--      ref="top_search_btn"-->
<!--      @click="onClick"-->
<!--      @focus="onFocus"/>-->
    <slot name="btnItem"></slot>
    <img v-if="!$slots.logoItem"
      :class="['logo_default_css',{'logo_left':logoLeft,'logo_right':logoRight}]" :style="logoStyle" :src="logo">
    <slot name="logoItem"></slot>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "@vue/runtime-core";
import ImgTextBtnView from "./img-text-btn-view.vue";
import {useESRouter} from "@extscreen/es3-router";
import {__CONFIG__, getAgreementKey} from "../views/config/global";
import {ref} from "vue";
import LoginStatusView from "../views/LoginStatusView"

export default defineComponent({
  name: "top-btns-view",
  components: {'img-text-btn-view':ImgTextBtnView,
    LoginStatusView
    },
  props:{
    parentStyle:Object,
    logoStyle:Object,
    logoLeft:Boolean,
    logoRight:Boolean
  },
  emits: ['focus', 'click'],
  setup(props, context) {
    const logo = require("../assets/ic_right_logo.png").default
    const router = useESRouter()
    const regNumber=__CONFIG__.regNumber+" "+__CONFIG__.IndRegNumber

    function onESCreate(params) {

    }

    function onESStart() {

    }

    function onESResume() {

    }

    function onESStop() {

    }

    function onClick(e):void{
      const name = e.target.attributes.name
      context.emit("click")
      switch (name){
        case "top_search_btn":
          router.push({
            name: 'screenList',
            params: {}
          });
          break;
        case "top_search_btn1":
          router.push({
            name: 'search',
            params: {}
          });
          break;
      }
    }
    function onFocus(e):void{
      const name = e.target.attributes.name
      switch (name){
        case "top_search_btn":
          context.emit("focus", e)
          break;
        case "top_search_btn1":
          context.emit("focus", e)
          break;
      }

    }
    return {
      logo,
      regNumber,
      onESCreate,
      onESStart,
      onESResume,
      onESStop,
      onClick,
      onFocus,

    }
  }
})
</script>

<style>
  .top_btns_root_css{
    position: absolute;
    width: 1920px;
    height:120px;
    background-color: transparent;
    display: flex;
    justify-content: start;
    align-items: center;
  }
  .is-logo-right{
    flex-direction: row;
    padding-left: 80px;
  }
  .is-logo-left{
    flex-direction: row-reverse;
    padding-right: 80px;
  }
  .top_btns_root_css .logo_default_css{
    position: absolute;
    width: 274px;
    height: 60px;
  }
  .top_btns_root_css .logo_left{
    left:90px;
  }
  .top_btns_root_css .logo_right{
    right:90px;
  }
  .home_regNumber{
    position: absolute;
    width: 920px;
    height: 32px;
    right: 20px;
    margin-top: 10px;
    font-size: 30px;
    font-weight: 40;
    color: #eeeeee;
    line-height: 32px;
    background-color: transparent;
  }
</style>
